@charset "UTF-8";
@mixin border-1px($color) {
    position: relative;
    &:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid $color;
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
    }
}

@mixin border-none() {
    &:after {
        display: none;
    }
}

@mixin bg-image($url) {
    background-image: url($url + "@2x.png");
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: url($url + "@3x.png");
    }
}

@mixin ellipsis() {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin btn-shadow-big($color) {
    -webkit-box-shadow:  0 3px 10px 0px transparentize($color, 0.3);
    box-shadow: 0 3px 10px 0px transparentize($color, 0.3);
}
@mixin btn-shadow-min($color) {
    -webkit-box-shadow:  0 1px 3px 0px transparentize($color, 0.1);
    box-shadow: 0 1px 3px 0px transparentize($color, 0.1);
}

.page-wrap {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.main-sidebar {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    //width: 20%;               /* For old syntax, otherwise collapses. */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
